<template>
	<view class="moxi_c_diy_title" :style="moxi.background(set.bgColor)+'border-radius:'+set.radius+';'">
	   <view class="moxi_c_diy_title_box " :style="'height:'+set.height+'px;'">
	       <view v-if="set.type=='left'" class="moxi_c_diy_title_left">
	           <h4 :style="'color: '+set.color+';'+isbold()+'font-size:'+set.title_size+'px;margin-left:10px'">
	               <image :src="set.icon" mode="aspectFill" :style="'width: '+set.title_size+'px;height: '+set.title_size+'px;margin-right:5px;margin-bottom:-2px;'" v-if="set.icon.length"></image>
				    {{set.title}}</h4>
	           <view v-if="set.more_title.length" :style="'font-size: 14px;color:'+set.color+';margin-right:10px;display:flex'" @click="nav()">
			   <text>{{set.more_title}}</text>
			   <view style="margin-top: 2px;margin-left: 4px;" v-if="set.right_icon==1" :color="set.color" :size="14"><u-icon name="arrow-right"></u-icon></view>
	          </view>
	       </view>
	       <view v-else class="moxi_c_diy_title_left">
	           <view style="width: 100%;display: flex;flex-direction: row;justify-content: flex-start;align-items: center;flex-shrink: 0;">
	               <view :style="'width: 100%;height: 1px;border-bottom: 1px '+set.color+' '+set.borderStyle"></view>
	               <view style="margin: 0 10px;flex:1 0 auto;">
	                   <h4 :style="'color: '+set.color+';'+isbold()+'font-size:'+set.title_size+'px;'">
						   <image :src="set.icon" mode="aspectFill" :style="'width: '+set.title_size+'px;height: '+set.title_size+'px;margin-right:5px;margin-bottom:-2px;'" v-if="set.icon.length"></image>
	                        {{set.title}}</h4>
	               </view>
	               <view :style="'width: 100%;height: 1px;border-bottom: 1px '+set.color+' '+set.borderStyle"></view>
	           </view>
	       </view>
	   </view>
	</view>
</template>

<script>
	export default {
		name:"diy-title",
		data() {
			return {
				boxStyle:""
			};
		},
		props:{
			 set:{
				type:Object,
			 	default(){
					return {
					  type:"left",
						bgColor:['#e26868','#f69090'],
						color:"#fff",
						icon:"https://moxifile.oss-cn-beijing.aliyuncs.com/images/mp/images/shangping.png",
						right_icon:1,
						more_title:"查看更多",
						more_url:"",
						title:"栏目标题",
						title_size:16,
						bold:1,
						radius:'15px 15px 0 0',
						height:50,
						borderStyle:"dashed"//dashed（虚线）、solid（实现）
					}
				}
			 }
		},methods:{
			nav:function(){
				this.navto(this.set.more_url)
			},
			 isbold:function () {
				if(this.set.bold==1){
					return 'font-weight: 600;'
				}else{
					return '';
				}
			}
		}
	}
</script>

<style>
.moxi_c_diy_title{background-color: #f0ad4e;}
.moxi_c_diy_title_box{width: 100%;display: flex;flex-direction: row;align-items: center;}
.moxi_c_diy_title_left{display: flex;flex-direction: row;justify-content: space-between;width: 100%;}
</style>